<template>
  <div style="height: 100%">
    <div class="wrapper-outer">
      <div class="wrapper-button">
        <div v-if="selectedRecordIndex > -1">
          <div style="font-size: 12px">最近一次修改：</div>
          <div style="font-size: 14px; font-weight: bold">
            {{ dayjs(selectedRecord.stamp).format("MM/DD HH:mm:SS") }}
          </div>
        </div>
        <div v-else style="font-size: 16px; font-weight: bold">默认值</div>
        <div>
          <transition name="el-fade-in">
            <el-button
              v-show="scrollTop > 20"
              type="primary"
              circle
              icon="ArrowUpBold"
              @click="scrollTo(-1)"
            >
            </el-button>
          </transition>
        </div>
      </div>

      <div class="wrapper-inner">
        <el-scrollbar height="100%" ref="scrollBar" @scroll="handleScroll">
          <div
            :class="['wrapper-content', isScrolling ? 'scroll-blur' : '']"
            @mouseover="mouseInScrollBar = true"
            @mouseleave="mouseInScrollBar = false"
          >
            <div
              style="
                text-align: center;
                padding: 36px 0;
                margin-bottom: 24px;
                border-bottom: 1px solid rgba(128, 128, 128, 0.1);
              "
            >
              <div style="margin-bottom: 12px">
                <span style="font-size: 54px; margin-right: 12px">{{
                  totalCapacity.value
                }}</span>
                <span style="font-size: 18px; margin-right: 12px">/</span>
                <span style="font-size: 18px">{{
                  totalCapacity.valueFull
                }}</span>
              </div>
              <div style="margin-bottom: 12px; padding: 0 12px">
                <el-progress
                  id="totalCapacityProgress"
                  v-if="totalCapacity.value / totalCapacity.valueFull"
                  :percentage="
                    (totalCapacity.value / totalCapacity.valueFull) * 100
                  "
                  :color="
                    matchColor(totalCapacity.value / totalCapacity.valueFull)
                  "
                  :text-inside="true"
                  :stroke-width="20"
                >
                  <span style="font-size: 12px; font-weight: bold"
                    >{{
                      Math.round(
                        (totalCapacity.value / totalCapacity.valueFull) * 100
                      )
                    }}%</span
                  >
                </el-progress>
              </div>
              <div
                style="font-size: 10px; margin: 8px 0"
                v-if="selectedRecordIndex > -1"
              >
                <span>
                  {{ dayjs(selectedRecord.start).format("MM/DD HH:mm") }}
                </span>
                <span style="padding: 0 6px">~</span>
                <span>
                  {{ dayjs(selectedRecord.end).format("MM/DD HH:mm") }}
                </span>
              </div>
              <div style="font-size: 14px">总通行能力&nbsp;(架/时)</div>
            </div>
            <div
              v-for="(conf, index) in selectedContent"
              :ref="setItemRef"
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                padding: 36px 0;
              "
            >
              <el-progress
                type="dashboard"
                :percentage="conf.capacityRatio * 100"
                :color="matchColor(conf.capacityRatio)"
              >
                <template #default="{ percentage }">
                  <span class="percentage-value">{{ percentage }}%</span>
                  <span class="percentage-label"
                    >{{ conf.currentCapacity }}架/时</span
                  >
                </template>
              </el-progress>
              <div
                style="
                  padding-bottom: 18px;
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span style="font-size: 16px; font-weight: bold">
                  {{ conf.areaName }}
                </span>
                <span style="font-size: 14px">
                  {{ conf.areaTypeName }}
                </span>
                <el-link
                  style="font-size: 14px"
                  type="primary"
                  @click="
                    $emit('clickConfig', { id: conf.areaCode, idx: index })
                  "
                  >修改</el-link
                >
              </div>
              <div style="width: 100%">
                <el-descriptions :column="1" size="small" border>
                  <el-descriptions-item label="模块">
                    <el-tag
                      v-for="p in conf.models"
                      size="small"
                      style="
                        padding: 0 3px;
                        margin-right: 3px;
                        font-size: 12px;
                        font-family: 'Consolas';
                      "
                      >{{ p }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="机场">
                    <el-tag
                      v-for="p in conf.raletedAirports"
                      size="small"
                      style="
                        padding: 0 3px;
                        margin-right: 3px;
                        font-size: 12px;
                        font-family: 'Consolas';
                      "
                      >{{ p }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="进点">
                    <el-tag
                      v-for="p in conf.raletedGatePoints"
                      size="small"
                      style="
                        padding: 0 3px;
                        margin-right: 3px;
                        font-size: 12px;
                        font-family: 'Consolas';
                      "
                      >{{ p }}
                    </el-tag>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
import useCapacityStore from "@/store/capacity";

// use dayjs instead of dateFormat;
import dayjs from "dayjs";

const capacityStore = useCapacityStore();
const selectedRecord = computed(() => capacityStore.selectedRecord);
const selectedRecordIndex = computed(() => capacityStore.selectedRecordIndex);
const selectedContent = computed(() => selectedRecord.value.content);
const totalCapacity = computed(() => capacityStore.computedTotalCapacity());

const emit = defineEmits(["clickConfig"]);

const matchColor = (ratio) => {
  if (ratio >= 0.9) return "#67C23A";
  if (ratio >= 0.7) return "#E6A23C";
  return "#F56C6C";
};

// handle auto scrolling while hovered on graphics or clicked in timeline;
const itemRefs = [];
const setItemRef = (el) => {
  if (el) {
    itemRefs.push(el);
  }
};
const scrollBar = ref();
const scrollTop = ref(0);
// const isScrolled = computed(() => scrollTop != 0);
let mouseInScrollBar = ref(false);
let isScrolling = ref(false);
const handleScroll = (position) => {
  if (!isScrolling.value && mouseInScrollBar.value) {
    scrollTop.value = position.scrollTop;
  }
};
let targetElement, tragetElemPostition;
const scrollTo = (id) => {
  if (id > -1) {
    targetElement = itemRefs[id];
    tragetElemPostition = targetElement.offsetTop - 32;
  } else {
    tragetElemPostition = 0;
  }
  isScrolling.value = true;
  stepScroll();
};
const stepScroll = () => {
  // if (mouseInScrollBar.value) return;
  let cut = 10; // distance cutting for each stepScroll
  let interval = 20; // interval for each stepScroll
  let distance = tragetElemPostition - scrollTop.value;
  scrollTop.value = scrollTop.value + distance / cut;
  // console.log(scrollTop.value);
  if (Math.abs(distance) < 100) {
    isScrolling.value = false;
  } else {
    isScrolling.value = true;
  }
  if (Math.abs(distance) < 1) {
    scrollBar.value.setScrollTop(tragetElemPostition);
  } else {
    scrollBar.value.setScrollTop(scrollTop.value);
    setTimeout(stepScroll, interval);
  }
};
defineExpose({ scrollTo });

// const getElementTop = (element) => {
//   let actualTop = element.offsetTop;
//   let current = element.offsetParent;
//   while (current !== null) {
//     actualTop += current.offsetTop;
//     current = current.offsetParent;
//   }
//   return actualTop;
// }
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}

.demo-progress .el-progress--circle {
  margin-right: 15px;
}

.wrapper-outer {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.wrapper-button {
  height: 60px;
  padding: 0 24px;
  /* display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.wrapper-inner {
  width: 100%;
  height: calc(100% - 60px);
}

.wrapper-content {
  padding: 24px 12px;
  margin-bottom: 640px;
  /* transition: all 0.75s cubic-bezier(.71, 0, .33, 1.56) 0ms; */
  /* transition: all 0.2s ease-in-out; */
  transition: all 0.3s linear;
}

.scroll-blur {
  filter: blur(3px);
}
</style>
